<template>
  <!-- 
    

    <div
      class="goodsStyle acea-row row-between"
      v-for="cart in orderInfo.cartInfo"
      :key="cart.id"
    >
      <div class="pictrue">
        <img :src="cart.productInfo.image" class="image" />
      </div>
      <div class="text acea-row row-between">
        <div class="name line2">{{ cart.productInfo.store_name }}</div>
        <div class="money">
          <div>
            ￥{{
              cart.productInfo.attrInfo
                ? cart.productInfo.attrInfo.price
                : cart.productInfo.price
            }}
          </div>
          <div class="num">x{{ cart.cart_num }}</div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="item acea-row row-between-wrapper">
        <div>退货件数</div>
        <div class="num">{{ orderInfo.total_num }}</div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>退款金额</div>
        <div class="num">￥{{ orderInfo.pay_price }}</div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>退款原因</div>
        <div class="num acea-row row-left">
          <select v-model="reason">
            <option value="">选择退款原因</option>
            <option
              v-for="(text, index) in reasonList"
              :value="text"
              :key="index"
            >
              {{ text }}
            </option>
          </select>
          <span class="iconfont icon-jiantou"></span>
        </div>
      </div>
      <div class="item textarea acea-row row-between">
        <div>备注说明</div>
        <textarea
          placeholder="填写备注信息，100字以内"
          class="num"
          v-model="refund_reason_wap_explain"
        ></textarea>
      </div>
      <div class="item acea-row row-between">
        <div class="title acea-row row-between-wrapper">
          <div>上传凭证</div>
          <div class="tip">( 最多可上传3张 )</div>
        </div>
        <div class="upload acea-row row-middle">
          <div
            class="pictrue"
            v-for="(img, index) in refund_reason_wap_img"
            :key="img"
          >
            <img :src="img" />
            <div
              class="iconfont icon-guanbi1 font-color-red"
              @click="refund_reason_wap_img.splice(index, 1)"
            ></div>
          </div>
          <VueCoreImageUpload
            class="btn btn-primary"
            :crop="false"
            compress="80"
            @imageuploaded="imageuploaded"
            :headers="headers"
            :max-file-size="5242880"
            :credentials="false"
            inputAccept="image/*"
            inputOfFile="file"
            :url="url"
            v-if="refund_reason_wap_img.length < 3"
          >
            <div class="pictrue acea-row row-center-wrapper row-column">
              <span class="iconfont icon-icon25201"></span>
              <div>上传凭证</div>
            </div>
          </VueCoreImageUpload>
        </div>
      </div>
    </div>
    <div class="returnBnt bg-color-red" @click="submit">申请退款</div>
  </div> -->



  <el-container>
      <el-header height="172px" style="padding:0 0;">
          <HomeNavigation></HomeNavigation>
          <SearchBox></SearchBox>
          <ClassNavigation></ClassNavigation>
      </el-header>
      <el-container class="goods">
        <el-container style="width:1090px;margin:20px auto 0;">
            <el-aside width="180px">
                <div class="side">
                  <el-menu
                  default-active="1-3"
                  active-text-color="#b4a078"
                  @open="handleOpen"
                  @close="handleClose">
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">我的服务</p>
                      <el-menu-item index="1-1">
                         <router-link to="/user">
                          <p class="sideIetm">个人中心</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-2">
                        <router-link to="/user/vip">
                          <p class="sideIetm">会员中心</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-3">
                        <router-link to="/user/add_manage">
                          <p class="sideIetm">地址信息</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-4">
                        <router-link to="/collection">
                        <p class="sideIetm">我的收藏</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-5">
                          <router-link to="/user/user_coupon">
                            <p class="sideIetm">优惠券</p>
                          </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">订单管理</p>
                      <el-menu-item index="2-1">
                        <router-link to="/order/list/0">
                          <p class="sideIetm">我的订单</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="2-2"><router-link to="/order/refund_list"> 
                        <p class="sideIetm">售后/退款</p>
                      </router-link></el-menu-item>
                    </el-menu-item-group>
                </el-menu>
              </div>
            </el-aside>
          <el-main style="padding: 20px 0 20px 20px;">
            <div class="main">
                <p class="title">申请退款</p>
                <div class="table">
                  <div class="t-title acea-row row-between-wrapper">
                    <span>退款商品</span>
                    <div class="acea-row  row-right">
                        <span>退款金额￥{{ orderInfo.pay_price }}</span>
                    </div>
                  </div>
                  <div class="t-line acea-row">
                    <div class="line-1">商品信息</div>
                    <div class="line-2">数量</div>
                    <div class="line-2">单价</div>
                    <div class="line-2">小计</div>
                  </div>
                  <div class="t-item acea-row" v-for="cart in orderInfo.cartInfo" :key="cart.id">
                      <div class="i-images">
                          <img :src="cart.productInfo.image" class="image" />
                      </div>
                      <div class="i-goods">{{ cart.productInfo.store_name }}</div>
                      <div class="i-num">x{{ cart.cart_num }}</div>
                      <div class="i-price">￥{{cart.productInfo.attrInfo ? cart.productInfo.attrInfo.price : cart.productInfo.price }}</div>
                      <div class="i-price">￥{{(cart.productInfo.attrInfo ? cart.productInfo.attrInfo.price : cart.productInfo.price) * cart.cart_num }}</div>
                  </div>   
                </div>
                <div class="g-return">
                  <div class="r-item acea-row">
                    <p class="i-name">退款原因：</p>
                      <el-select v-model="reason" placeholder="请选择退款原因" size="medium">
                          <el-option
                          v-for="(text, index) in reasonList"
                          :value="text"
                          :key="index"
                          > {{text}}
                          </el-option>
                        </el-select>
                  </div>
                  <div class="r-item acea-row">
                    <p class="i-name">备注说明：</p>
                      <el-input
                      type="textarea"
                      placeholder="填写备注"
                      v-model="refund_reason_wap_explain" 
                      maxlength="100"
                      class="i-textarea"
                      show-word-limit
                    >
                    </el-input>
                  </div>
                  <div class="r-item-1">
                      <p class="i-name-1 ">上传凭证（只能上传jpg文件，不得超过3张图片，每张不超过2M）：</p>
                        <el-upload
                          :action="url"
                          list-type="picture-card"
                          :on-success="imageuploaded"
                          limit="3"
                          :before-upload="beforeAvatarUpload"
                          >
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                  </div>
                  <div class="btn golden">
                    <el-button  @click="submit" ><p>申请退款</p>
                    </el-button>
                  </div> 
                </div>
            </div>
          </el-main>
        </el-container>
        <el-footer style="padding: 0;">
          <Foot></Foot>
      </el-footer>
      </el-container>
</el-container>
  
</template>

<script>
import { orderDetail, getRefundReason, postOrderRefund } from "@api/order";
import { trim, VUE_APP_API_URL } from "@utils";
import VueCoreImageUpload from "vue-core-image-upload";
import HomeNavigation from "@components/HomeNavigation";
import SearchBox from "@components/SearchBox";
import ClassNavigation from "@components/ClassNavigation";
import Foot from "@components/Foot";

export default {
  name: "goodsReturn",
  components: {
    VueCoreImageUpload,
    HomeNavigation,
    SearchBox,
    ClassNavigation,
    Foot
  },
  data() {
    return {
      url: `${VUE_APP_API_URL}/upload/image`,
      headers: {
        "Authori-zation": "Bearer " + this.$store.state.app.token
      },
      id: this.$route.params.id || 0,
      orderInfo: {},
      reasonList: [],
      reason: "",
      refund_reason_wap_explain: "",
      refund_reason_wap_img: []
    };
  },
  methods: {
    imageuploaded(res) {
      if (res.status !== 200)
        return this.$dialog.error(res.msg || "上传图片失败");
      this.refund_reason_wap_img.push(res.data.url);
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$dialog.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$dialog.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    getOrderDetail() {
      orderDetail(this.id)
        .then(res => {
          this.orderInfo = res.data;
        })
        .catch(err => {
          this.$dialog.error(err.msg || "获取订单失败");
        });
    },
    getRefundReason() {
      getRefundReason().then(res => {
        this.reasonList = res.data;
      });
    },
    submit() {
      const refund_reason_wap_explain = trim(this.refund_reason_wap_explain),
        text = this.reason;
      if (!text) return this.$dialog.toast({ mes: "请选择退款原因" });
      postOrderRefund({
        text,
        uni: this.orderInfo.order_id,
        refund_reason_wap_img: this.refund_reason_wap_img.join(","),
        refund_reason_wap_explain
      })
        .then(res => {
          this.$dialog.success(res.msg);
          this.$router.go(-1);
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    }
  },
  mounted() {
    this.getOrderDetail();
    this.getRefundReason();
  }
};
</script>
<style  scoped>
  .main {
    width: 1090px;
    margin: 0 auto;
  }
  .main .title {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
   color: #333333;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 10px;
  line-height: 1;
  margin-bottom: 10px;
  text-align: center;
  }
  .main .g-return {
    padding: 20px;
    margin-top: 20px;
    width: 890px;
    border: 1px solid #eaeaea;
  }
  .main .g-return .r-item-1 {
    width: 888px;
    margin: 20px 0;
  }
  .main .g-return  .r-item-1 .i-name-1 {
    width: 450px;
    color: #333333;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .main .g-return .r-item {
    width: 888px;
    height: 43px;
    margin-top: 20px;
  }
  .main .g-return .r-item  .i-name {
    width: 100px;
    color: #333333;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    text-align: center;
    margin-right: 10px;
  }
  .main .g-return .r-item .i-textarea {
    width: 500px;
  }
  .main .g-return .r-item .r-primary {
    width: 500px;
    height:300px ;
    border: 1px solid #eaeaea;
  }
  .main .table {
    width: 890px;
    border: 1px solid #eaeaea;
  }
  .main .table .t-line {
    width: 888px;
    height: 43px;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    color: #333333;
    font-family: "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1",verdana;
    background-color: #f5f5f5;
    border-top: 1px solid #eaeaea;
  }
  .main .table .t-line .line-1 {
    width: 455px;
  }
  .main .table .t-line .line-2 {
    width: 130px;
  }
  .main .table .t-item {
    width: 888px;
    height: 140px;
    padding: 20px 0px;
  }
  .main .table .t-item .i-images {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .main .table .t-item .i-images  img {
    width: 100%;
    height: 100%;
  }
  .main .table .t-item .i-goods {
    width: 315px;
    margin: auto 0px;
    text-align: center;
    line-height: 19px;
    font-size: 14px;
    color: #333333;
    font-family: "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1",verdana;
    overflow: hidden;
  }
  .main .table .t-item .i-num , .i-price{
    width: 130px;
    line-height: 19px;
    font-size: 14px;
    color: #333333;
    font-family: "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1",verdana;
    text-align: center;
    margin: auto 0;
  }
  .main .table .t-title {
    height: 43px;
    line-height: 42px;
    font-size: 14px;
    color: #333333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    background-color: #f4f4f4;
    padding: 0 20px;
  }
  .goods {
    background-color: #fff;
  }
  .goods .side {
    border: 1px solid #eaeaea;
    height:510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .goods .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }

  .goods .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .goods  .main {
    width: 890px;
  }


  .g-return .btn {
    margin-left: 394px;
  }
  .g-return  >>>.el-button--small {
    padding: 13px 30px;
    color: #999;
    border: 1px solid #c0ae8a;
    background-color: #f5f3ef;
  }
  .g-return  >>>.el-button--small:hover {
    background-color: #fff;
  }
  .g-return .golden p{
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #b4a078;
  }
</style>